<template>
    <view>
        <uni-segmented-control :current="menuIndex" :values="menuItems" style-type="text" active-color="#007aff" @clickItem="onClickItem" />

        <uni-list v-if="menuIndex === 0">
            <uni-list-item v-for="(item, index) in customerRankShares" :key="index">
                <template v-slot:header>
                    <uni-tag :text="index + 1" :type="getNo(index)" size="normal" />
                </template>
                <template v-slot:body>
                    <div style="flex: 1; margin-left: 10px; display: flex">
                        <u-avatar shape="square" size="24" :src="item.cfAvat"></u-avatar>
                        <view style="margin-left: 10px">{{ (item.cust?.ciName || "") + "(" + (item.cfWcna || " ") + ")" + item.cust?.ciPhon }}</view>
                    </div>
                </template>
                <template v-slot:footer>
                    <view>{{ numberFormat(item.cfShat, 0) }}</view>
                </template>
            </uni-list-item>
            <u-empty v-if="customerRankShares.length === 0" text="暂无数据"> </u-empty>
        </uni-list>

        <uni-list v-if="menuIndex === 1">
            <uni-list-item v-for="(item, index) in customerRankFissionOrders" :key="index">
                <template v-slot:header>
                    <uni-tag :text="index + 1" :type="getNo(index)" size="normal" />
                </template>
                <template v-slot:body>
                    <div style="flex: 1; margin-left: 10px; display: flex">
                        <u-avatar shape="square" size="24" :src="item.cfAvat"></u-avatar>
                        <view style="margin-left: 10px">{{ (item.cust?.ciName || "") + "(" + (item.cfWcna || " ") + ")" + item.cust?.ciPhon }}</view>
                    </div>
                </template>
                <template v-slot:footer>
                    <view>{{ numberFormat(item.cfShao, 0) }}</view>
                </template>
            </uni-list-item>
            <u-empty v-if="customerRankFissionOrders.length === 0" text="暂无数据"> </u-empty>
        </uni-list>

        <uni-list v-if="menuIndex === 2">
            <uni-list-item v-for="(item, index) in customerRankFissionAmount" :key="index">
                <template v-slot:header>
                    <uni-tag :text="index + 1" :type="getNo(index)" size="normal" />
                </template>
                <template v-slot:body>
                    <div style="flex: 1; margin-left: 10px; display: flex">
                        <u-avatar shape="square" size="24" :src="item.cfAvat"></u-avatar>
                        <view style="margin-left: 10px">{{ (item.cust?.ciName || "") + "(" + (item.cfWcna || " ") + ")" + item.cust?.ciPhon }}</view>
                    </div>
                </template>
                <template v-slot:footer>
                    <view>¥{{ numberFormat(item.cfSham, 2) }}</view>
                </template>
            </uni-list-item>
            <u-empty v-if="customerRankFissionAmount.length === 0" text="暂无数据"> </u-empty>
        </uni-list>
    </view>
</template>

<script>
import { getCustomerRanks } from "../../utils/api";
import { mapGetters } from "vuex";
import { getNo } from "../../utils/helper.js";

export default {
    data() {
        return {
            menuItems: ["分享次数", "裂变订单数", "裂变订单总额"],
            menuIndex: 0,
            customerRank: [],
            customerRankShares: [], //分享次数
            customerRankFissionOrders: [], //裂变订单数
            customerRankFissionAmount: [], // 裂变订单总额
        };
    },

    onLoad() {
        this.loadCustomerRank({ gpUuid: this.activity.gpUuid, orderBy: "CF_SHAT_DESC", first: 20, offset: 0 });
    },

    computed: {
        ...mapGetters({
            activity: "activityInfo/activity",
        }),
    },

    methods: {
        onClickItem(e) {
            if (this.menuIndex !== e.currentIndex) {
                this.menuIndex = e.currentIndex;
                if (e.currentIndex == 0) {
                    this.loadCustomerRank({ gpUuid: this.activity?.gpUuid, orderBy: "CF_SHAT_DESC", first: 20, offset: 0 });
                }
                if (e.currentIndex == 1) {
                    this.loadCustomerRank({ gpUuid: this.activity?.gpUuid, orderBy: "CF_SHAO_DESC", first: 20, offset: 0 });
                }
                if (e.currentIndex == 2) {
                    this.loadCustomerRank({ gpUuid: this.activity?.gpUuid, orderBy: "CF_SHAM_DESC", first: 20, offset: 0 });
                }
            }
        },
        async loadCustomerRank({ gpUuid, orderBy, first = 20, offset = 0 }) {
            let res = await getCustomerRanks({ gpUuid, orderBy, first, offset });
            if (orderBy === "CF_SHAT_DESC") this.customerRankShares = res?.ranks?.filter((item) => item.cfShat > 0) || [];
            if (orderBy === "CF_SHAO_DESC") this.customerRankFissionOrders = res?.ranks?.filter((item) => item.cfShao > 0) || [];
            if (orderBy === "CF_SHAM_DESC") this.customerRankFissionAmount = res?.ranks?.filter((item) => item.cfSham > 0) || [];
        },
    },
};
</script>

<style lang="scss" scoped></style>
